UIE-9379: Implementing Add Pool functionality for PgBouncer #13276

smans-akamai · 2026-01-13T16:23:02Z

Description 📝

This pull request is to implement the Add Pool functionality for PgBouncer. This will allow users to create new connection pools via a new drawer. Those connection pools will then be added to the connection pools table in the Networking tab.

Changes 🔄

List any change(s) relevant to the reviewer.

Configures the Add Pool button in the Database Details Networking tab Manage PgBouncer Connection Pools section to open an add connection pool drawer.
Adds default values and validation for the fields in this drawer.

Scope 🚢

Upon production release, changes in this PR will be visible to:

All customers
Some customers (e.g. in Beta or Limited Availability)
No customers / Not applicable

Preview 📷

Before	After

How to test 🧪

Prerequisites

(How to setup test environment)

Have the Database PgBouncer feature flag enabled
Turn on the legacy MSW
To make sure the Add Pool button gets enabled for postgresql database clusters, modify the mock database response by setting the database status property in makeMockDatabase to active.
To do this, add a new line here and add the following:

database.status = 'active';

Verification steps

(How to verify changes)
General

Go to the Networking tab of an active PostgreSQL Database Cluster http://localhost:3000/databases/postgresql/1/networking
Select the Add Pool button in the Manage PgBouncer Connection Pools section to open the Add a New Connection Pool drawer
Make a valid selection in the fields and select Add Pool
Verify that the connection pool is submitted successfully and that the drawer closes
Verify that reopening the drawer resets it to the default state

Backend Errors Displaying Below Fields

Uncomment the mock error response included in this pull request for the connection-pools POST request
Go to the Networking tab of an active PostgreSQL Database Cluster http://localhost:3000/databases/postgresql/1/networking
Select the Add Pool button in the Manage PgBouncer Connection Pools section to open the Add a New Connection Pool drawer
Make a valid selection in the fields and select Add Pool
Select submit and see that the POST returns an error response
Verify that the backend errors are displayed below their respective fields.

Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support

I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

All tests and CI checks are passing
TypeScript compilation succeeded without errors
Code passes all linting rules

...src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPoolAddDrawer.tsx

smans-akamai · 2026-01-15T22:38:29Z

...src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseAddConnectionPoolDrawer.tsx

+          border: `1px solid ${theme.tokens.component.Select.Error.Border}`,
+        }
+      : undefined;
+  };


The drawer is currently using the CDS Select and Linode MUI TextField since the numeric spinner isn't available in the cds-web-components yet. This is to give the cds Select component the same error border color that gets used with the Linode components in their error state.

It looks like we can also provide an error class to select, so I'm going to look into whether that gives the same border color. If so, we may be able to remove this and leverage that instead.

After testing it out, it looks like providing className="error" to the Select component doesn't provide the error class to the component and, as a result, it won't display the error styles for that class from the component. I also tried wrapping it in a div with the error class name, but that didn't work either.

Is there a specific way this class needs to be applied to Select? Otherwise we may need to keep this as a workaround for now.

I'm not sure since it's a CDS Select and it's different from how our UI Select component works. Maybe the CDS team would know

@smans-akamai, your approach also seems fine.

I wasn't able to reproduce an error state for these selects since there are no empty options, but I was playing around with cds-web-components and also just adding a new select there:

you can add your className but you also need to use styled :

const StyledSelect = styled(Select)` &.your-class { ... } `; <StyledSelect {...field} className="your-class" data-testid="database-name-select" ... />

@aaleksee-akamai Thanks, I'll look into this other approach. In the meantime, you can reproduce the error state in this pull request with the following steps:

Uncomment the mock error response for the connection-pools POST request

Go to the Networking tab of an active PostgreSQL Database Cluster http://localhost:3000/databases/postgresql/1/networking

Select the Add Pool button in the Manage PgBouncer Connection Pools section to open the Add a New Connection Pool drawer

Make a valid selection in the fields and select Add Pool

Select submit and see that the POST returns an error response

Verify that the backend errors are displayed below their respective fields.

I've included the steps in the description.

smans-akamai · 2026-01-16T16:11:32Z

packages/manager/src/mocks/serverHandlers.ts

+      //   },
+      //   { status: 400 }
+      // );
+      return HttpResponse.json(connectionPool);


You can uncomment the lines above to mock the error response for the fields to see the inline errors.

...src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPoolAddDrawer.tsx

...src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseAddConnectionPoolDrawer.tsx

...src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPoolAddDrawer.tsx

hana-akamai · 2026-01-16T16:23:15Z

...manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPools.tsx

          className={classes.actionBtn}
-          disabled={true}
-          onClick={() => null}
+          disabled={database.status !== 'active'}


We should probably add a tooltip to explain why the button is disabled. Something like:

Suggested change

disabled={database.status !== 'active'}

disabled={database.status !== 'active'}

tooltipText={

database.status !== 'active' ? 'Cluster must be active' : ''

}

That's a good point! I've just made this change and included the following text:
To add a new connection pool, the database cluster must be active.

I used similar language to what we have for DatabaseManageNetworking but I can double check the language with tech writing.

Here's it appearing in the UI

Hmm what about The database cluster must be active to add a new connection pool? Swap the wording around so that the reason is first 🤔

...src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPoolAddDrawer.tsx

hana-akamai · 2026-01-16T19:39:57Z

...manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPools.tsx

          className={classes.actionBtn}
-          disabled={true}
-          onClick={() => null}
+          disabled={database.status !== 'active'}


Hmm what about The database cluster must be active to add a new connection pool? Swap the wording around so that the reason is first 🤔

hana-akamai · 2026-01-16T19:41:03Z

...manager/src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPools.tsx

+          onClick={() => setIsAddPoolDrawerOpen(true)}
          TooltipProps={{ placement: 'top' }}
+          tooltipText={
+            database.status !== 'active'


We should create a disabled variable so that the state is sync'd

dwiley-akamai

Verification steps ✅

dwiley-akamai · 2026-01-16T21:28:13Z

...src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseAddConnectionPoolDrawer.tsx

+  /** Shared ErrorText component that displays formatted error messages below form field components that don't have the errorText property */
+  const SharedErrorText = (errorMessage: string | undefined) =>
+    errorMessage && (
+      <FormHelperText
+        error
+        role="alert"
+        sx={{ marginTop: theme.spacingFunction(4) }}
+      >
+        {errorMessage}
+      </FormHelperText>
+    );
+
+  /** Utility function to generate error styles for form field components that can't set them by default */
+  const makeErrorStyles = (errorMessage: string | undefined) => {
+    return errorMessage
+      ? {
+          border: `1px solid ${theme.tokens.component.Select.Error.Border}`,
+        }
+      : undefined;
+  };


Could consider moving these to the databases utilities file, especially if they may be used elsewhere for the feature

linode-gh-bot · 2026-01-16T22:43:42Z

Cloud Manager UI test results

🔺 1 failing test on test run #11 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
`1 Failing`	`854 Passing`	`11 Skipped`	`40m 30s`

Details

Failing Tests
	Spec	Test
❌	`clone-linode.spec.ts`	Cloud Manager Cypress Tests→clone linode » can clone a Linode from Linode details page

Troubleshooting

Use this command to re-run the failing tests:

pnpm cy:run -s "cypress/e2e/core/linodes/clone-linode.spec.ts"

aaleksee-akamai · 2026-01-20T11:11:36Z

...src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseAddConnectionPoolDrawer.tsx

+                    return `${poolMode.charAt(0).toUpperCase()}${poolMode.slice(1)}`;
+                  }}
+                />
+                {SharedErrorText(fieldState.error?.message)}


that seems ok but just curious - why you don't use rules there?

hana-akamai · 2026-01-20T16:29:29Z

...src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseAddConnectionPoolDrawer.tsx

+    }
+  };
+
+  const { mode, database, username } = watch();


We should probably use useWatch over watch for performance

github-project-automation bot added this to Cloud Manager Jan 13, 2026

github-project-automation bot moved this to Review in Cloud Manager Jan 13, 2026

smans-akamai requested a review from hana-akamai January 13, 2026 16:23

smans-akamai added 8 commits January 15, 2026 15:36

UIE-9379: Implementing Add Pool functionality for PgBouncer

b2816fd

Adding fix to schema for null value validation issue and cleanup

d5e058d

starting on initial validation

f5d06cd

Adding error mocking for calls in serverHandlers

c1f0a9a

Adding backend error handling for add pool drawer fields

1b0b8aa

Initial cleanup and adjusting validation based on discussions

c0661cc

Creating initial test file

a4ce511

Adding unit tests and updating markup for add pool drawer

eceb323

smans-akamai force-pushed the UIE-9379-dbaas-networking-pgbouncer-add-connection-pool branch from 3595b01 to eceb323 Compare January 15, 2026 20:37

smans-akamai added the DBaaS Relates to Database as a Service label Jan 15, 2026

smans-akamai added 2 commits January 15, 2026 17:18

additional cleanup

dfa43e3

Added changesets

be1594a

smans-akamai marked this pull request as ready for review January 15, 2026 22:30

smans-akamai requested a review from a team as a code owner January 15, 2026 22:30

smans-akamai commented Jan 15, 2026

View reviewed changes

...src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPoolAddDrawer.tsx Outdated Show resolved Hide resolved

smans-akamai commented Jan 15, 2026

View reviewed changes

...src/features/Databases/DatabaseDetail/DatabaseNetworking/DatabaseConnectionPoolAddDrawer.tsx Outdated Show resolved Hide resolved

smans-akamai commented Jan 15, 2026

View reviewed changes

smans-akamai commented Jan 16, 2026

View reviewed changes

smans-akamai self-assigned this Jan 16, 2026

hana-akamai reviewed Jan 16, 2026

View reviewed changes

Applying initial feedback

881a2e9

hana-akamai reviewed Jan 16, 2026

View reviewed changes

dwiley-akamai reviewed Jan 16, 2026

View reviewed changes

Applying secondary feedback

54529c9

aaleksee-akamai reviewed Jan 20, 2026

View reviewed changes

hana-akamai reviewed Jan 20, 2026

View reviewed changes

UIE-9379: Implementing Add Pool functionality for PgBouncer #13276

Are you sure you want to change the base?

UIE-9379: Implementing Add Pool functionality for PgBouncer #13276

Conversation

smans-akamai commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description 📝

Changes 🔄

Scope 🚢

Preview 📷

How to test 🧪

Prerequisites

Verification steps

As an Author, to speed up the review process, I considered 🤔

As an Author, before moving this PR from Draft to Open, I confirmed ✅

Uh oh!

Uh oh!

Uh oh!

smans-akamai Jan 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

smans-akamai Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

smans-akamai Jan 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

smans-akamai Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dwiley-akamai left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

linode-gh-bot commented Jan 16, 2026

Cloud Manager UI test results

🔺 1 failing test on test run #11 ↗︎

Details

Troubleshooting

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

smans-akamai commented Jan 13, 2026 •

edited

Loading

smans-akamai Jan 15, 2026 •

edited

Loading

smans-akamai Jan 16, 2026 •

edited

Loading

smans-akamai Jan 20, 2026 •

edited

Loading

smans-akamai Jan 16, 2026 •

edited

Loading